<template>
  <div>
    <avue-crud
      :option="option"
      :data="data"
      :page.sync="page"
      :table-loading="loading"
      @on-load="onLoad"
      @current-change="currentChange"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="small"
          :disabled="page.total == 0"
          :loading="downLoading"
          @click.stop="handleDownload"
        >导出</el-button>
      </template>
      <template
        slot="org"
        slot-scope="scope"
      >
        <span>{{scope.row.dept_pvalue}}</span>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { getOffice } from '@/utils/org.js'
import { yhzcMx } from '@/api/operate.js'
export default {
  data() {
    return {
      data: [],
      loading: false,
      downLoading: false,
      searchList: {},
      /* 分页 */
      page: {
        pageSize: 10,

        pageSizes: [10, 20, 40, 50, 100],
        pagerCount: 5,
        layout: 'total, sizes, prev, pager, next, jumper',

        currentPage: 1,
        total: 0,
        background: false,
      },
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        excelBtn: false,
        selection: false,
        searchLabelWidth: '25%',
        searchSpan: 6,
        searchMenuSpan: 4,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        // searchBtn: true,
        menu: false,
        searchShowBtn: false,

        column: [
          {
            label: '机构',
            prop: 'org',
            slot: 'org',
            display: false,
            search: true,
            type: 'select',
            dicData: [],
          },
          {
            label: '分支机构',
            prop: 'dept_value',
            display: false,
          },
          {
            label: '角色',
            prop: 'role_name',
            display: false,
          },
          {
            label: '账号名',
            prop: 'login_name',
            display: false,
          },
          {
            label: '中文名',
            prop: 'user_name',
            display: false,
          },
          {
            label: '工号',
            prop: 'eid',
            display: false,
          },
          {
            label: '注册时间',
            prop: 'create_time',
            display: false,
          },
        ],
      },
    }
  },
  created() {
    getOffice().then((res) => {
      this.option.column[0].dicData = res
    })
  },
  methods: {
    onLoad() {
      let searchList = this.searchList
      let params = {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      }
      this.loading = true
      yhzcMx(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = Number(data.data.total)
        }
      })
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    handleDownload() {
      let searchList = this.searchList
      let params = {
        ...searchList,
        pageNum: 1,
        pageSize: this.page.total,
      }
      this.downLoading = true
      yhzcMx(params).then((res) => {
        this.downLoading = false
        if (res.status) {
          let data = res.data.records
          let opt = {
            title: '注册用户分析明细',
            column: [
              {
                label: '机构',
                prop: 'dept_pvalue',
              },
              {
                label: '分支机构',
                prop: 'dept_value',
              },
              {
                label: '角色',
                prop: 'role_name',
              },
              {
                label: '账号名',
                prop: 'login_name',
              },
              {
                label: '中文名',
                prop: 'user_name',
              },
              {
                label: '工号',
                prop: 'eid',
              },
              {
                label: '注册时间',
                prop: 'create_time',
              },
            ],
            data: data,
          }
          this.$Export.excel({
            title: opt.title,
            columns: opt.column,
            data: opt.data,
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
// /deep/ .avue-crud .el-table th{
//     background: #559beb;
//     color: #fff;
// }
</style>
